import QtQuick
import Qt5Compat.GraphicalEffects
import Fk
import Fk.Components.LunarLTK
import Fk.Components.Common

Item {
  id: root
  property int pileNum: 0
  property int roundNum: 0
  property int playedTime: 0
  visible: roundNum || pileNum

  function getTimeString(time) {
    let s = time % 60;
    s < 10 && (s = '0' + s);
    const m = (time - s) / 60;
    const h = (time - s - m * 60) / 3600;
    return h ? `${h}:${m}:${s}` : `${m}:${s}`;
  }

  Text {
    id: timeTxt
    anchors.bottom: deckImg.top
    anchors.bottomMargin: -2
    anchors.left: deckImg.left
    anchors.leftMargin: deckImg.width/2 - timeTxt.width/2
    color: '#ffffff'
    font.pixelSize: 13
    font.family: Config.libianName
    style: Text.Outline
    styleColor: "#3D2D1C"
  }

  Timer {
    interval: 1000
    running: true
    repeat: true
    onTriggered: {
      playedTime++;
      timeTxt.text = getTimeString(playedTime);
    }
  }

  Rectangle {
    id: gradRect
    anchors.fill: roundTxt
    gradient: Gradient {
      GradientStop { position: 0.2;  color: "#dea13d" }
      GradientStop { position: 0.3;  color: "#dea13d" }
      GradientStop { position: 0.5;  color: "#ffe794" }
      GradientStop { position: 0.75; color: "#fccb63" }
      GradientStop { position: 1.0;  color: "#f5b46d" }
    }
    visible: false
  }

  Image {
    id: deckImg
    anchors.top: parent.top
    anchors.topMargin: 5
    anchors.right: parent.right
    source: Cpp.path + "/packages/lunarltk-qsgs-ui/image/system/RoundBG.png"
    height: 35
    fillMode: Image.PreserveAspectFit
  }

  Text {
    id : roundTxt
    anchors.top: deckImg.top
    anchors.topMargin: -2
    anchors.right: deckImg.right
    anchors.rightMargin: 37 - roundTxt.width/2
    text: roundNum
    color: "#ffffff"
    font.pixelSize: 20
    font.bold: true
    font.family: Config.libianName
    style: Text.Outline
    styleColor: "#40070a"
  }

  DropShadow {
    anchors.fill: roundTxt
    radius: 6
    samples: 10
    color: "#40070a"
    source: roundTxt
  }

  Text {
    id: roundText
    anchors.fill: roundTxt
    text: roundNum
    color: 'white'
    font.pixelSize: 20
    font.bold: true
    font.family: Config.libianName
  }

  OpacityMask {
    anchors.fill: roundText
    source: gradRect
    maskSource: roundText
  }

  Text {
    id: pileNumText
    anchors.bottom: deckImg.bottom
    anchors.bottomMargin: 3
    anchors.right: deckImg.right
    anchors.rightMargin: 16 - pileNumText.width/2
    font.family: "SimSun"
    font.pixelSize: 13
    font.bold: true
    color: "#cbbc9b"
    text: pileNum.toString()
  }
}
